<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块数据V1.1</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .controls {
            margin-bottom: 20px;
            text-align: center;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .loading {
            text-align: center;
            padding: 20px;
            display: none;
        }
        .error {
            color: #e74c3c;
            text-align: center;
            padding: 10px;
            display: none;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        /* 添加行悬停效果 */
        tbody tr:hover {
            background-color: #f0f8ff;
            cursor: pointer;  /* 鼠标变为手指形状 */
        }
        .positive {
            color: #27ae60;
        }
        .negative {
            color: #e74c3c;
        }
        .footer {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>板块数据</h1>

    <div id="loading" class="loading">
        正在加载数据，请稍候...
    </div>

    <div id="error" class="error">
        数据加载失败，请重试或检查网络连接。
    </div>

    <div id="stockTableContainer"></div>

    <div class="footer">
        <p>数据仅供参考，最新更新日期: <span id="updateDate"></span></p>
    </div>
</div>

<script>
    function openUrl(url) {
        window.open(url, '_blank'); // '_blank' 会在新窗口或新标签页中打开URL
    }

    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    $(document).ready(function() {
        // 设置更新日期
        const now = new Date();
        $('#updateDate').text(now.toLocaleDateString());
        loadStockData();

        // 加载股票数据函数
        function loadStockData() {
            $('#loading').show();
            $('#error').hide();

            var code = getUrlParam("code");
            var dataUrl="/stock/bk/" + code;
            $.ajax({
                url: dataUrl,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#loading').hide();
                    renderStockTable(data);
                },
                error: function(xhr, status, error) {
                    $('#loading').hide();
                    $('#error').show();
                    console.error('数据请求失败:', error);
                }
            });
        }

        // 渲染股票表格函数
        function renderStockTable(data) {
            var table = $('<table>').addClass('stock-table');

            // 创建表头
            var thead = $('<thead>').appendTo(table);
            var headerRow = $('<tr>').appendTo(thead);

            // 添加表头列
            $('<th>').text('股票编码').appendTo(headerRow);
            $('<th>').text('名称').appendTo(headerRow);
            $('<th>').text('今日涨幅(%)').appendTo(headerRow);
            $('<th>').text('PE值').appendTo(headerRow);
            $('<th>').text('当前价').appendTo(headerRow);
            $('<th>').text('涨跌').appendTo(headerRow);

            // 创建表格主体
            var tbody = $('<tbody>').appendTo(table);

            // 遍历数据并添加行
            $.each(data, function(index, item) {
                var row = $('<tr>').appendTo(tbody);

                // 添加单元格数据
                var f12=item.f12 || 'N/A';
                $('<td>').text(item.f12 || 'N/A').appendTo(row);
                $('<td>').text(item.f14 || 'N/A').appendTo(row);

                // 处理涨幅，添加颜色样式
                var changeCell = $('<td>').appendTo(row);
                if (item.f3 !== undefined) {
                    var changeClass = item.f3 >= 0 ? 'negative' : 'positive';
                    changeCell.text(item.f3.toFixed(2) + '%').addClass(changeClass);
                } else {
                    changeCell.text('N/A');
                }

                $('<td>').text(item.f9 !== undefined ? item.f9.toFixed(2) : 'N/A').appendTo(row);
                $('<td>').text(item.f2 !== undefined ? item.f2.toFixed(2) : 'N/A').appendTo(row);

                // 计算并显示涨跌金额
                var changeAmountCell = $('<td>').appendTo(row);
                if (item.f2 !== undefined && item.f3 !== undefined) {
                    var changeAmount = (item.f2 * item.f3 / 100).toFixed(2);
                    var amountClass = changeAmount >= 0 ? 'negative' : 'positive';
                    changeAmountCell.text(changeAmount).addClass(amountClass);
                } else {
                    changeAmountCell.text('N/A');
                }

                // 添加点击事件 - 核心修改部分
                row.on('click', function() {
                    if (item.f12) {
                        openUrl('/stock_minute.html?code=' + item.f12);
                    }
                });
            });

            // 清空容器并添加表格
            $('#stockTableContainer').empty().append(table);
        }
    });
</script>
</body>
</html>